<template>
	<view>
        <uv-checkbox-group v-model="checkItemMaps" shape="circle" @change="changeItem" v-if="skus.length > 0">
            <view class="goods-section">
                <uv-swipe-action>
                    <uv-swipe-action-item :options="options" v-for="(sku,index) in skus" :key="index" @click="removecart($event, index)">
                        <view class="g-item" @click="changeCurrentItem(sku)">
                            <uv-checkbox :value="sku.cartItemId" shape="circle" :name="sku.cartItemId"/>
                            <image :src="uniConfig.ssoPath + sku.logo"></image>
                            <view class="right">
                                <text class="title clamp">{{ sku.productName }}</text>
                                <view class="spec">{{ sku.skuName }}</view>
                                <view class="price-box">
                                    <text class="price">￥{{ sku.sellPrice }}</text>
                                    <view class="number">
                                        <uv-number-box :min="1" button-size="30" :asyncChange="true" v-model="sku.qty" @change="changeQunty($event,sku)"></uv-number-box>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </uv-swipe-action-item>
                </uv-swipe-action>
            </view>
        </uv-checkbox-group>
        <view v-else style="margin-top:35vh">
            <uv-empty :text="`未发现购物内容`"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
        </view>
		<!-- 底部 -->
		<view class="footer">
            <view style="padding:12rpx 32rpx 0">
                <uv-checkbox-group v-model="checkAll" shape="circle" @change="changeItems">
                    <uv-checkbox name="all" value="all" shape="circle" label="全选"></uv-checkbox>
                </uv-checkbox-group>
                <view class="price-content">
                    <text>总计</text>
                    <text class="price-tip">￥</text>
                    <text class="price">{{ totalPrice }}</text>
                </view>
            </view>
			<text class="submit bg-line-color" @click="submit">去结算</text>
		</view>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref , computed , getCurrentInstance} from 'vue'
import { createSkuCartOrder , sureSkuCartItem , addSkuCart, deleteSkuCartItem , getSkuCart} from "@/api/product"
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const member = computed(() => {
  return store.memberInfo
})
import { onLoad } from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
const skus = ref<any>([])
const submit = () => {
    if(checkItemMaps.value.length > 0){
        uni.redirectTo({
            url:`/pages/mall/skuCartConfirm?cartItemIds=${checkItemMaps.value.join(',')}`
        })
    }else{
        uni.showToast({icon:'none',title:'请先选择结算的商品~'})
    }
}
const options = ref<any>([{
    text: '删除',
    style: {
        backgroundColor: '#f56c6c'
    }
}])

const checkAll = ref<any>([])
const checkItemMaps = ref<any>([])
const checkObject = ref<any>({})
const changeItems = () => {
    if (checkAll.value.length == 0) {
        checkItemMaps.value = []
        checkObject.value = {}
    } else {
        for (let i of skus.value) {
            checkItemMaps.value.push(i.cartItemId)
            checkObject.value[i.cartItemId] = i
        }
    }
    totalAmount()
}
const changeItem = () => {
    checkObject.value = {}
    if(checkItemMaps.value.length != skus.value.length){
        checkAll.value = []
    }else {
        checkAll.value = ['all']
    }
    for (let i of skus.value) {
        if(checkItemMaps.value.includes(i.cartItemId))checkObject.value[i.cartItemId] = i
    }
    totalAmount()
}

const totalAmount = () => {
    let num = 0;
    console.info(checkObject.value)
    Object.values(checkObject.value).forEach(item => {
        console.info(item)
        num += item.qty * item.sellPrice * 1;
    })
    totalPrice.value = numFilter(num)
}

const changeCurrentItem = (sku : any) => {
    if(checkItemMaps.value.includes(sku.cartItemId)){
        checkItemMaps.value = checkItemMaps.value.filter(item => {return item != sku.cartItemId})
    }else checkItemMaps.value.push(sku.cartItemId)
    changeItem()
}

const removecart = (e : any, index : any) => {
    const { content } = e;
    uni.showModal({
        title: '提示',
        content: '确认删除当前物品？',
        success: res => {
            if (res.confirm) {
                const id = skus.value[index].cartItemId
                deleteSkuCartItem({cartItemId:id}).then(sres => {
                    if(sres.success){
                        if(checkItemMaps.value.includes(id)){
                            checkItemMaps.value = checkItemMaps.value.filter(item => {return item != id})
                        }
                        changeItem()
                        uni.showToast({icon:'success',title:'删除成功！'})
                        pageInit()
                    }else{
                        uni.showToast({icon:'none',title:sres.msg})
                    }
                })
            }
        }
    });
}

const totalPrice = ref<any>(0)
const pageInit = () => {
    getSkuCart({}).then(res => {
        skus.value = res.data
    })
}
const numFilter = (value : any) => {
	// 截取当前数据到小数点后两位
	let realVal = parseFloat(value).toFixed(2)
	return realVal
}

const changeQunty = (e:any,sku:any) => {
    addSkuCart({
        skuId:sku.skuId,
        qty:e.value
    }).then(res => {
        if(res.success){
            sku.qty = e.value
            totalAmount()
        }else uni.showToast({icon:'none',title:res.msg})
    })
}

onLoad(async (options : any) => {
    const { proxy } = getCurrentInstance();
    await proxy.$onLaunched;
    pageInit()
})
</script>

<style lang="scss">
page {
    background: $page-color-base;
    padding-bottom: 100upx;
}
.goods-section {
    margin:0 auto;
    width:92vw;
    .uv-swipe-action-item{
        margin: 32rpx 0;
        border-radius: 9px;
    }
    .g-header {
        display: flex;
        align-items: center;
        height: 84upx;
        padding: 0 30upx;
        position: relative;
    }

    .logo {
        display: block;
        width: 50upx;
        height: 50upx;
        border-radius: 100px;
    }

    .name {
        font-size: 30upx;
        color: $font-color-base;
        margin-left: 24upx;
    }

    .g-item {
        display: flex;
        margin: 22upx 32upx;
        padding: 32upx 0;
        image {
            flex-shrink: 0;
            display: block;
            width: 140upx;
            height: 140upx;
            border-radius: 4upx;
        }

        .right {
            flex: 1;
            padding-left: 24upx;
            overflow: hidden;
        }

        .title {
            font-size: 32upx;
            color: $font-color-dark;
            font-weight: 600;
        }

        .spec {
            font-size: 26upx;
            color: $font-color-light;
        }

        .price-box {
            display: flex;
            align-items: center;
            font-size: 32upx;
            color: $base-color;
            padding-top: 10upx;
            justify-content: space-between;
            .price {
                margin-bottom: 4upx;
            }
            .number{
                font-size: 26upx;
                color: $font-color-base;
                margin-left: 20upx;
            }
        }

        .step-box {
            position: relative;
        }
    }
}

.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 102upx;
    justify-content: space-between;
    font-size: 30upx;
    background-color: #fff;
    z-index: 998;
    color: $font-color-base;
    box-shadow: 0 -1px 5px rgba(0,0,0,.1);
    .price-content{
        font-size:24upx;
        padding-left: 46upx;
    }
    .price-tip{
        color: $base-color;
        margin-left: 8upx;
    }
    .price{
        font-size: 26upx;
        color: $base-color;
    }
    .submit{
        display:flex;
        align-items:center;
        justify-content: center;
        width: 280upx;
        height: 100%;
        color: #fff;
        font-size: 32upx;
        background-color: $base-color;
    }
}

/* 优惠券面板 */
.mask{
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 9995;
    transition: .3s;
    
    .mask-content{
        width: 100%;
        min-height: 30vh;
        max-height: 70vh;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: .3s;
        overflow-y:scroll;
    }
    &.none{
        display: none;
    }
    &.show{
        background: rgba(0,0,0,.4);
        
        .mask-content{
            transform: translateY(0);
        }
    }
}
</style>
